<template>
    <div class="wrapper">
      <BusinessHeader>
          商家列表
      </BusinessHeader>
      <ul>
        <li
            v-for="item in shopList"
            :key="item.businessId"
            @click="toDetail(item.id)"
        >
          <div class="foodList">
            <img :src="item.imgUrl">
            <div>
              <p>{{ item.name}}</p>
              <p>{{item.startPrice}}起送|{{item.deliveryPrice}}元配送</p>
              <p>{{item.description}}</p>
            </div>
          </div>
        </li>
      </ul>
      <TabBar></TabBar>
    </div>

</template>

<script setup>
import TabBar from '@/components/common/TabBar'
import BusinessHeader from "@/components/common/HeaderPart";
import {onBeforeMount, ref} from "vue";
import {getAllShops} from "@/utils/api/ShopManager";
import {useRouter} from "vue-router";

// 定义商品列表
const shopList = ref([])
onBeforeMount(async ()=>{
  const res = await getAllShops()
  shopList.value = res.data
})
// 跳转到详情页
const router = useRouter()
function toDetail(id) {
  router.push('/BusinessListPart/BusinessDetail/' + id);
}
</script>

<style scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
}
ul {
  margin-top: 70px;
  display: flex;
  flex: 1;
  flex-direction: column;
  list-style: none;
  padding-inline-start: 0;
  padding-bottom: 5rem;
}
.foodList {
  height: 150px;
  display: flex;
  align-items: center;
}
.foodList img {
  height:90% ;
  padding: 10px;
  width: 40%;
}
</style>